<template>
    <el-dialog :title="isView ? '查看' : dataForm.id ? $t('common.editBtn') : $t('common.addBtn')" v-model="visible" width="800"
        :close-on-click-modal="false" draggable>
        <el-form :model="dataForm" :rules="dataRules" label-width="120px" ref="dataFormRef" v-loading="loading">
            <el-row :gutter="50">

                <el-col :span="12" class="mb-6">
                    <el-form-item :label="$t('basEquipment.equipmentCode')" prop="eqpCode">
                        <el-input clearable :placeholder="$t('basEquipment.enterEquipmentCode')" v-model="dataForm.eqpCode" />
                    </el-form-item>
                </el-col>

                <el-col :span="12" class="mb-6">
                    <el-form-item :label="$t('basEquipment.equipmentName')" prop="eqpName">
                        <el-input clearable :placeholder="$t('basEquipment.enterEquipmentName')" v-model="dataForm.eqpName" />
                    </el-form-item>
                </el-col>
                <el-col :span="12" class="mb20">
                    <el-form-item :label="$t('basEquipment.equipmentType')" prop="eqpType">
                        <el-select v-model="dataForm.eqpType" :placeholder="$t('basEquipment.selectEquipmentType')">
                            <el-option v-for="item in options" :key="item.value" :label="item.text" :value="item.value" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12" class="mb-6">
                    <el-form-item :label="$t('basEquipment.equipmentSpecification')" prop="eqpSpec">
                        <el-input v-model="dataForm.eqpSpec" :placeholder="$t('basEquipment.enterEquipmentSpecification')"/>
                    </el-form-item>
                </el-col>
                <el-col :span="12" class="mb-6">
                    <el-form-item :label="$t('basEquipment.powerConsumption')" prop="powerConsumption">
                        <el-input v-model="dataForm.powerConsumption" :placeholder="$t('basEquipment.enterPowerConsumption')">
                            <template #append>kWh</template>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12" class="mb-6">
                    <el-form-item :label="$t('basEquipment.manufacturer')" prop="manufacturer">
                        <el-input clearable :placeholder="$t('basEquipment.enterManufacturer')" v-model="dataForm.manufacturer" />
                    </el-form-item>
                </el-col>
                <el-col :span="12" class="mb-6">
                    <el-form-item :label="$t('basEquipment.supplier')" prop="supplier">
                        <el-input clearable :placeholder="$t('basEquipment.enterSupplier')" v-model="dataForm.supplier" />
                    </el-form-item>
                </el-col>
                <el-col :span="12" class="mb-6">
                    <el-form-item :label="$t('basEquipment.productionDate')" prop="productionDate">
                        <el-date-picker v-model="dataForm.productionDate" type="date" :placeholder="$t('basEquipment.enterProductionDate')" />
                    </el-form-item>
                </el-col>
                <el-col :span="12" class="mb-6">
                    <el-form-item :label="$t('basEquipment.productionBatch')" prop="productionBatch">
                        <el-input clearable :placeholder="$t('basEquipment.enterProductionBatch')" v-model="dataForm.productionBatch" />
                    </el-form-item>
                </el-col>
                <el-col :span="12" class="mb-6">
                    <el-form-item :label="$t('basEquipment.intoFactoryDate')" prop="intoFactoryDate">
                        <el-date-picker v-model="dataForm.intoFactoryDate" type="date" :placeholder="$t('basEquipment.enterIntoFactoryDate')" />
                    </el-form-item>
                </el-col>
                <el-col :span="12" class="mb-6">
                    <el-form-item :label="$t('basEquipment.acceptanceDate')" prop="acceptanceDate">
                        <el-date-picker v-model="dataForm.acceptanceDate" type="date" :placeholder="$t('basEquipment.enterAcceptanceDate')" />
                    </el-form-item>
                </el-col>
                <el-col :span="12" class="mb-6">
                    <el-form-item :label="$t('basEquipment.startUseDate')" prop="startUseDate">
                        <el-date-picker v-model="dataForm.startUseDate" type="date" :placeholder="$t('basEquipment.enterStartUseDate')" />
                    </el-form-item>
                </el-col>
                <el-col :span="12" class="mb-6">
                    <el-form-item :label="$t('basEquipment.esxpectedServiceLife')" prop="esxpectedServiceLife">
                        <el-input v-model="dataForm.esxpectedServiceLife" :placeholder="$t('basEquipment.enterEsxpectedServiceLife')">
                            <template #append>{{ $t('basEquipment.year') }}</template>
                        </el-input>

                    </el-form-item>
                </el-col>
                <el-col :span="12" class="mb-6">
                    <el-form-item :label="$t('basEquipment.estimatedUseExpirationDate')" prop="estimatedUseExpirationDate">
                        <el-date-picker v-model="dataForm.estimatedUseExpirationDate" type="date" :placeholder="$t('basEquipment.enterEstimatedUseExpirationDate')" />
                    </el-form-item>
                </el-col>
                <el-col :span="12" class="mb-6">
                    <el-form-item :label="$t('basEquipment.useProcess')" prop="useProcess">
                        <el-input clearable :placeholder="$t('basEquipment.enterUseProcess')" v-model="dataForm.useProcess" />
                    </el-form-item>
                </el-col>
                <el-col :span="12" class="mb-6">
                    <el-form-item :label="$t('basEquipment.useDepartment')" prop="useDepartment">
                        <el-input clearable :placeholder="$t('basEquipment.enterUseDepartment')" v-model="dataForm.useDepartment" />
                    </el-form-item>
                </el-col>
                <el-col :span="12" class="mb-6">
                    <el-form-item :label="$t('basEquipment.storagePlace')" prop="storagePlace">
                        <el-input clearable: :placeholder="$t('basEquipment.enterStoragePlace')" v-model="dataForm.storagePlace" />
                    </el-form-item>
                </el-col>
                <el-col :span="12" class="mb-6">
                    <el-form-item :label="$t('basEquipment.usageStatus')" prop="usageStatus">
                        <el-input clearable :placeholder="$t('basEquipment.enterUsageStatus')" v-model="dataForm.usageStatus" />
                    </el-form-item>
                </el-col>
                <el-col :span="12" class="mb-6">
                    <el-form-item :label="$t('basEquipment.checkCycle')" prop="checkCycle">
                        <el-input clearable :placeholder="$t('basEquipment.enterCheckCycle')" v-model="dataForm.checkCycle" />
                    </el-form-item>
                </el-col>
                <el-col :span="12" class="mb-6">
                    <el-form-item :label="$t('basEquipment.eqpPlace')" prop="eqpPlace">
                        <el-input clearable :placeholder="$t('basEquipment.enterEqpPlace')" v-model="dataForm.eqpPlace" />
                    </el-form-item>
                </el-col>
                <el-col :span="12" class="mb-6">
                    <el-form-item :label="$t('basEquipment.remark')" prop="remark" style="width: 215%;">
                        <el-input v-model="dataForm.remark" maxlength="100" :placeholder="$t('basEquipment.enterRemark')" show-word-limit
                            type="textarea" />
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <template #footer>
        <span class="dialog-footer">
          <el-button @click="visible = false" icon="Close">{{$t('basEquipment.cancel')}}</el-button>
          <el-button v-if="!isView" type="primary" @click="onSubmit" :disabled="loading" icon="Check">{{$t('basEquipment.confirm')}}</el-button>
        </span>
    </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { nextTick, reactive, ref } from 'vue';
import {useMessage} from "/@/hooks/message";
import {CreateEquipmentLedger,UpdateEquipmentLedger,getValueSet} from '/@/api/platform/digital/basEquipment'
const emit = defineEmits(['refresh']);
import {useI18n} from 'vue-i18n';
const {t} = useI18n();
// 定义变量内容
const dataFormRef = ref();
const visible = ref(false);
const loading = ref(false);
const detail = ref(false);
const isView = ref(false)
// 定义form数据
const form = reactive({
    id: ''
})
const dataForm = reactive({
    eqpCode: '',
    eqpName: '',
    eqpType: '',
    powerConsumption: "",
    manufacturer: "",
    supplier: "",
    productionDate: "",
    productionBatch: "",
    intoFactoryDate: "",
    acceptanceDate: "",
    startUseDate: "",
    esxpectedServiceLife: "",
    estimatedUseExpirationDate: "",
    useProcess: "",
    useDepartment: "",
    storagePlace: "",
    usageStatus: "",
    checkCycle: "",
    eqpPlace: "",
    remark: "",
    id: ""
})
const options = ref([]);
onMounted(() => {
  getValueSet({ code: 'DeviceType' }).then(res => {
    res.data.forEach(element => {
      options.value.push({ text: element.text, value: element.value })
    });
  })
})
// 定义表单校验规则
const dataRules = reactive({
    eqpCode: [
    {required: true, message: t('basEquipment.enterEquipmentCode'), trigger: 'blur'},
  ],
  eqpName: [
    {required: true, message: t('basEquipment.enterEquipmentName'), trigger: 'blur'},
  ],
  eqpType: [
    {required: true, message: t('basEquipment.selectEquipmentType'), trigger: 'blur'},
  ],
  powerConsumption:[
    // 限制数字
    {pattern:/^\d*\.?\d*$/, message: t('basEquipment.enterNumbersOnly'), trigger: 'blur'},
  ],
  esxpectedServiceLife:[
    // 限制数字
    {pattern: /^\d*\.?\d*$/, message: t('basEquipment.enterNumbersOnly'), trigger: 'blur'},
  ],
})

// 提交
const onSubmit = async () => {
  const valid = await dataFormRef.value.validate().catch(() => {
  });
  if (!valid) return false;

  try {
    loading.value = true;
    dataForm.id ? await UpdateEquipmentLedger(dataForm) : await CreateEquipmentLedger(dataForm);
    useMessage().success(dataForm.id ? t('basEquipment.editSuccess'): t('basEquipment.addSuccess'));
    visible.value = false;
    loading.value = false;
    emit('refresh');
  } catch (err: any) {
    useMessage().error(err.msg);
  } finally {
    loading.value = false;
  }
};

// 打开弹框
const openAddDialog = async () => {
    visible.value = true;
    isView.value = false;
    dataForm.id = undefined
    dataForm.eqpCode= '';
    dataForm.eqpName= '';
    dataForm.eqpType= '';
    dataForm.powerConsumption= "";
    dataForm.manufacturer= "";
    dataForm.supplier= "";
    dataForm.productionDate= "";
    dataForm.productionBatch= "";
    dataForm.intoFactoryDate= "";
    dataForm.acceptanceDate= "";
    dataForm.startUseDate= "";
    dataForm.esxpectedServiceLife= "";
    dataForm.estimatedUseExpirationDate= "";
    dataForm.useProcess= "";
    dataForm.useDepartment= "";
    dataForm.storagePlace= "";
    dataForm.usageStatus= "";
    dataForm.checkCycle= "";
    dataForm.eqpPlace= "";
    dataForm.remark= "";
    dataForm.id= ""
    dataFormRef.value = null
    console.log(dataForm.value,dataFormRef.value)
    // 重置表单数据
    await nextTick(() => {
        dataFormRef.value?.resetFields();
    });

};

// 编辑弹框
const openEditDialog = (data: any) => {
    visible.value = true;
    isView.value = false;
    // 将data中的数据解构到dataForm中
    Object.assign(dataForm, data);
}

// 编辑弹框
const openViewDialog = (data: any) => {
    visible.value = true;
    isView.value = true;
    // 将data中的数据解构到dataForm中
    Object.assign(dataForm, data);
}

// 暴露变量
defineExpose({
    openAddDialog, openEditDialog,openViewDialog
});
</script>
